import React, { Component } from 'react'
import '../assets/sass/formgroup.scss'
import styles from '../assets/css/form.module.css'

export default class FormGroup extends Component {
  state = {
    username: 'cc'
  }
  constructor() {
    super()
    this.myInput = React.createRef() // 获取节点的
  }
  setUserName = (e) => {
    console.log(e)
    this.setState({
      username: e.target.value
    })
  }
  componentDidMount() {
    console.log(this.myInput)
    console.log(this.myInput.current.value)
    console.log(this.myInput.current.offsetWidth)
    this.myInput.current.focus()
  }
  render() {
    const {username} = this.state
    return (
      <div className={styles.group}>
        <h3>表单处理</h3>

        <div className='form-item'>
          <input type="text" value={username} onChange={this.setUserName} ref={this.myInput} />
        </div>
      </div>
    )
  }
}
